Angular Material এর Material Form Field একটি অত্যন্ত গুরুত্বপূর্ণ UI উপাদান যা ফর্ম ইনপুট ফিল্ডগুলোকে সুন্দর, ব্যবহারযোগ্য এবং সহজবোধ্য করে তোলে। এটি ইনপুট ফিল্ডের চারপাশে একটি স্টাইলযুক্ত কনটেইনার প্রদান করে, যা টেক্সট ফিল্ড, সিলেক্ট বক্স, রেডিও বাটন ইত্যাদি ফর্ম কন্ট্রোলকে সঠিকভাবে উপস্থাপন করে। এর সাথে ইনপুট ভ্যালিডেশন, লেবেল এবং প্লেসহোল্ডার প্রপার্টি গুলি যুক্ত করা হয় যা ব্যবহারকারীদের জন্য আরও সহজ এবং আকর্ষণীয় করে তোলে।

Material Form Field এর বৈশিষ্ট্য

Material Form Field ইনপুট ফিল্ডের চারপাশে একটি সুন্দর কনটেইনার প্রদান করে, যা ইনপুট ফিল্ডের সঠিক প্রদর্শন এবং প্রয়োজনীয় লেবেল, প্লেসহোল্ডার, এবং ইনফরমেটিভ টেক্সট সাপোর্ট করে। এর কিছু মূল বৈশিষ্ট্য হলো:

• Label: ফিল্ডের উপরে একটি লেবেল প্রদর্শন করা।
• Hint: ইনপুট ফিল্ডের নিচে একটি নির্দেশিকা টেক্সট প্রদর্শন করা।
• Error: ফর্মের ইনপুট ভ্যালিডেশন ত্রুটির জন্য একটি ত্রুটি বার্তা দেখানো।
• Floating Placeholder: প্লেসহোল্ডার টেক্সট ইনপুট ফিল্ডের উপরে ভাসমান অবস্থায় থাকে।
• Helper Text: ইনপুট ফিল্ডের জন্য হেল্প টেক্সট বা নির্দেশিকা প্রদান করা।

Material Form Field ব্যবহার করা

এখানে Material Form Field ব্যবহারের একটি সহজ উদাহরণ দেখানো হলো:

উদাহরণ:

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter your username" [(ngModel)]="username">
  <mat-hint>Username should be unique</mat-hint>
  <mat-error *ngIf="username.hasError('required')">Username is required</mat-error>
</mat-form-field>

• <mat-form-field>: এটি মূল কনটেইনার যা ফর্ম ইনপুট ফিল্ডের চারপাশে থাকে।
• appearance="fill": এটি ইনপুট ফিল্ডের জন্য একটি নির্দিষ্ট স্টাইল প্রদান করে, যেমন 'outline', 'fill', বা 'standard' স্টাইল।
• <mat-label>: এটি ইনপুট ফিল্ডের লেবেল।
• matInput: এটি ইনপুট ফিল্ডে ম্যাটেরিয়াল ডিজাইনের স্টাইলিং প্রয়োগ করে।
• placeholder: ইনপুট ফিল্ডের প্লেসহোল্ডার টেক্সট।
• <mat-hint>: এটি ইনপুট ফিল্ডের নিচে নির্দেশিকা টেক্সট প্রদান করে।
• <mat-error>: এটি ইনপুট ফিল্ডের ত্রুটি বার্তা প্রদর্শন করে যখন ইনপুট ফিল্ডটি ভুল হয়।

Material Form Field এর appearance

Angular Material Form Field এর জন্য কিছু ভিন্ন appearance অপশন রয়েছে যা ইনপুট ফিল্ডের স্টাইল নির্ধারণ করে।

1. appearance="fill": এই অপশনটি ইনপুট ফিল্ডকে পূর্ণ রঙের ব্যাকগ্রাউন্ড প্রদান করে।
   • ফিল স্টাইল: ইনপুট ফিল্ডের ব্যাকগ্রাউন্ড দৃশ্যমান থাকে।
2. appearance="outline": এটি ইনপুট ফিল্ডের চারপাশে একটি আউটলাইন প্রদর্শন করে।
   • আউটলাইন স্টাইল: বর্ডার সহ ইনপুট ফিল্ড।
3. appearance="standard": এটি ডিফল্ট স্টাইল, যেখানে কোনো বিশেষ বর্ডার বা ব্যাকগ্রাউন্ড নেই।
   • স্ট্যান্ডার্ড স্টাইল: শুধু ইনপুট ফিল্ডের নিচে একটি লাইন থাকে।

<mat-form-field appearance="outline">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Enter your username" [(ngModel)]="username">
</mat-form-field>

Validation এবং Error Message

Material Form Field ইনপুট ফিল্ডের জন্য ইনপুট ভ্যালিডেশন সমর্থন করে। <mat-error> ব্যবহার করে আপনি ত্রুটি বার্তা প্রদর্শন করতে পারেন, যখন ইনপুট ফিল্ডে ভুল ইনপুট দেওয়া হয়।

উদাহরণ:

<mat-form-field appearance="fill">
  <mat-label>Email</mat-label>
  <input matInput [formControl]="email" placeholder="Enter your email">
  <mat-error *ngIf="email.invalid && email.touched">Please enter a valid email</mat-error>
</mat-form-field>

• [formControl]: এটি ব্যবহার করা হয় ফর্ম কন্ট্রোলের সাথে ইনপুট ফিল্ডকে যুক্ত করার জন্য।
• *ngIf="email.invalid && email.touched": এটি শুধুমাত্র ত্রুটি বার্তা দেখাবে যদি ইনপুট ফিল্ডটি ত্রুটিপূর্ণ এবং ব্যবহারকারী এটি স্পর্শ করেছে।

Material Select (Drop-down)

এছাড়াও, Material Form Field এর মধ্যে Select বক্স ব্যবহার করা যেতে পারে। এটি একটি ড্রপডাউন মেনু তৈরি করে, যেখানে ব্যবহারকারী একটি অপশন নির্বাচন করতে পারে।

উদাহরণ:

<mat-form-field appearance="fill">
  <mat-label>Country</mat-label>
  <mat-select [(value)]="selectedCountry">
    <mat-option value="usa">USA</mat-option>
    <mat-option value="canada">Canada</mat-option>
    <mat-option value="uk">UK</mat-option>
  </mat-select>
</mat-form-field>

• <mat-select>: এটি একটি ড্রপডাউন মেনু তৈরি করে।
• <mat-option>: এটি প্রতিটি অপশন প্রদর্শন করে যা ড্রপডাউন মেনুতে থাকবে।

Material Form Field Angular Material এর একটি গুরুত্বপূর্ণ উপাদান যা ফর্ম ইনপুট ফিল্ডগুলোর জন্য সুন্দর, ব্যবহারকারী-বান্ধব এবং স্টাইলযুক্ত কনটেইনার তৈরি করে। এটি লেবেল, প্লেসহোল্ডার, নির্দেশিকা, ত্রুটি বার্তা এবং বিভিন্ন ধরনের কাস্টমাইজেশন সাপোর্ট করে। Angular Material ফর্মের উন্নতমানের ডিজাইন এবং ইনপুট ভ্যালিডেশন ফিচারের জন্য এটি একটি অত্যন্ত কার্যকর টুল।